<template>
  <div>
  <van-cell-group :key="id">
    <div ref="customColor" v-if="flag" class="ranking">{{rank}}</div>
     <van-cell :title="name" center :label="author +'  '+ name" @click="$router.push({path:'/component',query:{id:id}})">
  <!-- 使用 right-icon 插槽来自定义右侧图标 -->
     <template #right-icon>
    <van-icon name="play-circle-o" class="search-icon" @touchstart="playMusic"/>
  </template>
</van-cell>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    author: String,
    id: Number,
    index: Number
  },
  data () {
    return {
      flag: this.$store.state.flag,
      rank: 0
    }
  },
  mounted () {
    this.rank = this.index
    if (this.rank < 3) {
      console.log(this.$refs.customColor)
      this.$refs.customColor.className = 'custom'
    }
    this.rank = this.rank < 9 ? '0' + (this.rank + 1) : (this.rank + 1)
  },
  methods: {
    playMusic () {
      this.$router.push({
        path: '/play',
        query: {
          id: this.id
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  .search-icon {
    font-size: 16px;
    line-height: inherit;
  }
  .ranking{
    flex: 1.3;
    width: 45px;
    height: 66px;
    font-size: 17px;
    color: #999999;
    line-height: 66px;
    text-align: center;
  }
  .custom{
    flex: 1.3;
    width: 45px;
    height: 66px;
    font-size: 17px;
    line-height: 66px;
    text-align: center;
    color: #df3436
    !important
  }
 /deep/ .van-cell{
    flex: 8.7;
  }
  /deep/.van-cell-group{
    display: flex;
  }
</style>
